<script setup lang="ts">
/**
 *  @/layouts/BasicLayout.vue
 *  可复用的基本布局
 *
 *  使用方法如下
 *  <BasicLayout/> <-- 这种会使用默认布局方便您查看
 *    <BasicLayout :showAside="true"> <-- 这种需要插入子组件, 并且设置某些组件是否渲染
 *      <template #header>
 *        <div>自定义页头内容</div>
 *      </template>
 *      <template #main>
 *        <div>自定义主体内容</div>
 *      </template>
 *      <template #footer>
 *        <div>自定义页脚内容</div>
 *      </template>
 *    </BasicLayout>
 */

/* 引入 */
import { defineProps, ref } from "vue";

/* 数据 */
defineProps({
  showHeader: { type: Boolean, default: true },
  showMain: { type: Boolean, default: true },
  showFooter: { type: Boolean, default: true },
});
</script>

<template>
  <div class="basic-layout">
    <el-container>
      <!-- 页头插槽 -->
      <el-header class="header" v-if="showHeader">
        <slot name="header">默认页头内容</slot>
      </el-header>

      <!-- 主体插槽 -->
      <el-main class="main" v-if="showMain">
        <slot name="main">默认主体内容</slot>
      </el-main>

      <!-- 页脚插槽 -->
      <el-footer class="footer" v-if="showFooter">
        <slot name="footer">默认页脚内容</slot>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
/* TODO: 全局背景设置(加上有点丑, 后面再加上...) */
.main {
  border-left: 20px solid #ffffff;
  border-right: 20px solid #ffffff;
  border-top: 20px solid #ffffff;
  background-image: url("/public/images/backgound.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
}
</style>
